<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/swiper-bundle.min.css" />
    <link rel="stylesheet" href="css/swipers.css">
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    img {
        display: block;
    }

    li {
        list-style: none;
    }

    a {
        text-decoration: none;
        display: block;
    }

    .div_body {
        height: 100vh;
        width: 100vw;
        background: url("images/background.jpg");
        overflow: auto;
        background-size: 100% auto;
        background-repeat: no-repeat;
    }

    .fix_head {
        height: 84px;
        width: 100vw;
        background: rgba(0, 0, 0, 0.8);
        position: fixed;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .text_body {
        width: 100%;
        margin-top: 90px;
        min-height: calc(100vh - 281px);
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .empty {
        width: 100%;
        aspect-ratio: 3.9;
    }

    .empty>a {
        display: block;
        height: 100%;
        width: 100%;
    }

    .text_flex {
        width: 1200px;
        display: flex;
    }

    .swi {
        width: 604px;
        height: 342px;
        background-color: rgba(0, 0, 0, 0.699);
        ;
    }

    .picture {
        width: 604px;
        height: 298px;
    }

    .swi_link {
        height: 44px;
        display: flex;
        background-color: black;
    }

    .swi_link>a {
        width: 120.88px;
        display: block;
        text-align: center;
        line-height: 44px;
        color: #b1b2be;
    }

    .swi_link>a:hover {
        background-color: #414046;
        color: rgb(255, 177, 32);
    }

    .information {
        height: 342px;
        width: 359px;
        background-color: rgba(0, 0, 0, 0.699);
    }

    .down {
        width: 236px;
        height: 342px;

    }

    .down>a {
        width: 236px;
        display: block;
        background: url("images/index.png") no-repeat;
    }

    .down :nth-child(1) {
        background-position: 0 -219px;
        height: 128px;
    }

    .down :nth-child(2) {
        background-position: 0 -350px;
        height: 106px;
    }

    .down :nth-child(3) {
        background-position: 0 -461px;
        height: 108px;
    }

    .pictures {
        width: 1200px;
        height: 134px;
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
    }

    .pictures a {
        overflow: hidden;
    }

    .pictures img {
        transition: all .4s;
    }

    .pictures img:hover {
        transform: scale(1.1);
    }

    .nav {
        margin-left: 53px;
    }

    .nav ul {
        display: flex;
    }

    .nav ul li>a {
        display: block;
        height: 84px;
        width: 110px;
        text-align: center;
        line-height: 84px;
        color: #c9c9dd;
        font-size: 18px;
    }

    .nav ul li>a:hover {
        color: rgb(255, 177, 32);
        background: repeating-linear-gradient(to top, rgba(255, 191, 71, 0.233), rgba(0, 0, 0, 0));
    }

    #navBar {
        position: absolute;
        width: 110px;
        height: 3px;
        top: 81px;
    }

    .nav ul li a:hover #navBar {
        background-color: rgb(255, 177, 32);
    }

    .titleBar {
        height: 48px;
        width: 325px;
        border-bottom: 1px solid #000;
        margin: 0 auto;
    }

    .titleBar>ul {
        display: flex;
    }

    #inforBar {
        display: block;
        height: 48px;
        width: 52px;
        text-align: center;
        line-height: 48px;
        color: #c9c9dd;
        position: relative;
    }

    #colorBar {
        position: absolute;
        bottom: 0px;
        height: 3px;
        width: 100%;
    }

    #inforBar:hover #colorBar {
        background-color: rgb(255, 177, 32);

    }

    #inforBar:hover {
        color: rgb(255, 177, 32)
    }

    .import>a {
        display: block;
        height: 36px;
        width: 325px;
        margin: 18px auto 11px auto;
        background-color: #414046;
        line-height: 36px;
        font-size: 18px;
        color: rgb(255, 177, 32)
    }

    .detailed {
        display: block;
        width: 325px;
        margin: 0 auto;
        display: flex;
        position: relative;
    }

    .detailed span:nth-child(1) {
        font-size: 12px;
        width: 32px;
        text-align: center;
        border: 1px solid #ff3636;
        color: #ff3636;
    }

    .detailed span:nth-child(2) {
        font-size: 14px;
        color: #c9c9dd;
    }

    .detailed span:nth-child(3) {
        font-size: 12px;
        float: right;
        position: absolute;
        right: 0px;
        color: #a0a0a0;
    }


    .body_bottom {
        width: 100%;
        position: relative;
        padding-bottom: 20px;
        margin-top: 50px;
        height: 171px;
    }

    .body_bottom>div {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

    .tencent {
        width: 1200px;
        display: flex;
        border-bottom: 3px solid #4140464b;
        padding-bottom: 10px;
    }

    .tencent>a {
        display: block;
        background: url("images/spr.png") no-repeat;
    }

    .tencent a:nth-child(1) {
        width: 285px;
        height: 64px;
    }

    .tencent a:nth-child(2) {
        width: 70px;
        height: 64px;
        background-position: -285px 0;
    }

    .copyright {
        width: 1200px;
        text-align: center;
    }

    .copyright>ul {
        display: flex;
        font-size: 12px;
        color: #646467;
        justify-content: center;
        margin-top: 10px;
    }

    .copyright ul a {
        color: #646467;
    }

    #copyright {
        color: #646467;
        font-size: 12px;
    }

    #copyright a {
        color: #646467;
        font-size: 12px;
        display: inline;
    }

    #copyright em {
        font-style: normal;
        margin-right: 15px;
    }
</style>

<body>
    <div class="div_body">
        <div class="fix_head">
            <div><a href=""><img src="	https://game.gtimg.cn/images/yxzj/web201706/images/comm/logo.png" alt=""></a>
            </div>
            <div class="nav">
                <ul>
                    <li><a href="" id="sds">游戏资料<div id="navBar"></div></a>
                    </li>
                    <li><a href="">内容中心<div id="navBar"></div></a></li>
                    <li><a href="">赛事中心<div id="navBar"></div></a></li>
                    <li><a href="">百态王者<div id="navBar"></div></a></li>
                    <li><a href="">社区互动<div id="navBar"></div></a></li>
                    <li><a href="">IP新游<div id="navBar"></div></a></li>
                </ul>
            </div>
        </div>
        <div class="text_body">
            <div class="empty">
                <a href=""></a>
            </div>
            <div class="text_flex">
                <div class="swi">
                    <!-- <div class="picture">
                        <img src="	https://ossweb-img.qq.com/upload/adw/image/194/20221215/d8016de17956d121d659ad9e70e62f16.jpeg"
                            alt="">
                    </div> -->
                    <div class="swiper mySwiper">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide"><a href=""><img src="images/bd3ea5e6dbac1b6c28b302444edcbdf6.jpeg"
                                        alt=""></a></div>
                            <div class="swiper-slide"><a href=""><img src="images/d8016de17956d121d659ad9e70e62f16.jpeg"
                                        alt=""></a></div>
                            <div class="swiper-slide"><a href=""><img src="images/09a4211c90f8c866e83daed74a2db3f3.jpeg"
                                        alt=""></a></div>
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                    <div class="swi_link">
                        <a href="">联名首发英雄</a>
                        <a href="">世冠TOP5</a>
                        <a href="">世冠半决赛</a>
                        <a href="">大仙暖冬送福利</a>
                        <a href="">世界四强预测</a>
                    </div>
                </div>
                <div class="information">
                    <div class="titleBar">
                        <ul>
                            <li><a href="" id="inforBar">
                                    <div>热门</div>
                                    <div id="colorBar"></div>
                                </a></li>
                            <li><a href="" id="inforBar">
                                    <div>新闻</div>
                                    <div id="colorBar"></div>
                                </a></li>
                            <li><a href="" id="inforBar">
                                    <div>公告</div>
                                    <div id="colorBar"></div>
                                </a></li>
                            <li><a href="" id="inforBar">
                                    <div>活动</div>
                                    <div id="colorBar"></div>
                                </a></li>
                            <li><a href="" id="inforBar">
                                    <div>赛事</div>
                                    <div id="colorBar"></div>
                                </a></li>
                            <li><a href="" id="inforBar">
                                    <div>...</div>
                                    <div id="colorBar"></div>
                                </a></li>
                        </ul>
                    </div>
                    <div class="title_bottom">
                        <div class="import"><a href="">12月21日全服不停机更新</a></div>
                        <div>
                            <a href="" class="detailed">
                                <span>热门</span>
                                <span>12月21日全服不停机公告</span>
                                <span>12/24</span>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="down">
                    <a href=""></a>
                    <a href=""></a>
                    <a href=""></a>
                </div>
            </div>
            <div class="pictures">
                <a href="">
                    <img src="images/1.jpg" alt="">
                </a>
                <a href="">
                    <img src="images/2.png" alt="">
                </a>
                <a href="">
                    <img src="images/3.jpg" alt="">
                </a>
                <a href="">
                    <img src="images/4.png" alt="">
                </a>
            </div>
        </div>
        <div class="body_bottom">
            <div>
                <div class="tencent">
                    <a href=""></a>
                    <a href=""></a>
                </div>
                <div class="copyright">
                    <ul>
                        <li><a href="">腾讯互动娱乐</a></li>
                        <li> | </li>
                        <li><a href="">服务条款</a></li>
                        <li>|</li>
                        <li><a href="">王者荣耀隐私保护指引</a></li>
                        <li>|</li>
                        <li><a href="">儿童隐私保护指引</a></li>
                        <li>|</li>
                        <li><a href="">腾讯游侠招聘</a></li>
                        <li>|</li>
                        <li><a href="">腾讯游戏客服</a></li>
                        <li>|</li>
                        <li><a href="">游戏列表</a></li>
                        <li>|</li>
                        <li><a href="">广告服务及商务合作</a></li>
                    </ul>
                    <div id="copyright">
                        <div style="margin-top: 10px
                        ;">
                            <em>抵制不良游戏</em><em>拒绝盗版游戏</em><em>注意自我保护</em><em>谨防受骗上当</em><em>适度游戏益脑</em><em>沉迷游戏伤身</em><em>合理安排时间</em><em>享受健康生活</em>
                        </div>
                        <div style="margin-top: 10px
                        ;">
                            <p>COPYRIGHT © 1998 - 2022 TENCENT. ALL RIGHTS RESERVED.</p>
                            <span style="margin-right: 10px;">腾讯公司版权所有</span><span><a
                                    href="https://game.qq.com/self-discipline_pact.shtml">网络游戏防沉迷自律公约</a></span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="js/swiper-bundle.min.js"></script>
    <script>
        var swiper = new Swiper(".mySwiper", {
            autoplay: {
                delay: 7000,
                stopOnLastSlide: false,
                disableOnInteraction: true,
            },

            //swiper指示点
            // pagination: {
            //     el: ".swiper-pagination",
            // },
        });
    </script>
</body>


</html>